<template>
  <!-- v-loading="true" -->
  <div>
    <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" />
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportOrderFn" v-loading="loading" @pageAdd="openDialog">
      <template #price="{ row }">
        {{ moneyFormat(row.price) }}
      </template>
      <template #produ="{ row }">
        <div>
          <div v-for="(item, index) in row.userOrderInfoResponses" :key="index">{{ item.productname }}</div>
        </div>
      </template>
      <template #num="{ row }">
        <div>
          <div v-for="(item, index) in row.userOrderInfoResponses" :key="index">{{ item.num }}</div>
        </div>
      </template>
      <template #fpimage="{ row }">
        <el-image v-if='row.fpimage' style="width: 100px; height: 100px;z-index: 9999999;" :src="getPicImg(row.fpimage)"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[getPicImg(row.fpimage)]"
          :preview-teleported='true' :initial-index="4" fit="cover" />
        <div v-else>-</div>
      </template>
      <template #orderstatu="{ row }">
        <!-- <el-button :type="filterColor(row.orderstatu)" link>{{ filterOrder(row.orderstatu) }}</el-button> -->
        <el-tag :type="filterColor(row.orderstatu)">{{ filterOrder(row.orderstatu) }}</el-tag>
      </template>
      <template #operation="{ row }">
        <el-button type="primary" link @click="openForm(row)">修改状态</el-button>
        <el-button type="primary" link @click="openDrawerFn(row)">项目/用途</el-button>

        <!-- <el-popconfirm title="确认要删除吗?" @confirm="delData(row.id)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
</el-popconfirm> -->

      </template>



    </pageTable>

    <Dialog ref="DialogRef" @submit="submitForm(ruleFormRef)" @onclose="resetForm(ruleFormRef)" title="修改订单状态">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="订单状态">
              <el-select v-model="ruleForm.type" placeholder="请选择状态">
                <el-option label="待付款" value="0" />
                <el-option label="已完成" value="1" />
                <el-option label="待收货" value="2" />
                <el-option label="退货" value="3" />
                <el-option label="待发货" value="4" />
                <el-option label="退货完成" value="5" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="20" v-if="ruleForm.type === '2'">
          <el-col :span="24">
            <el-form-item label="快递单号" prop="ydh">
              <el-input v-model="ruleForm.ydh" autocomplete="off" placeholder="请填写快递单号" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="20" v-if="ruleForm.type === '1'">
          <el-col :span="24">
            <el-form-item label="发票">
              <LTUpload v-model="ruleForm.urlList"></LTUpload>
            </el-form-item>
          </el-col>
        </el-row> -->


        <el-row :gutter="20" v-if="ruleForm.type === '1'">
          <el-col :span="24">
            <el-form-item label="发票">
              <uploadFiles :data="{ ispic: '0' }" type="1" v-model="ruleForm.urlList"></uploadFiles>
            </el-form-item>
          </el-col>
        </el-row>







      </el-form>

    </Dialog>


    <Drawer ref="DrawerRef" :isShowClose='false' @submit="DrawerRefClose()" confirmText="关闭">
      <el-form-item label="项目名称">{{ userOrderInfoResponses?.xmmc }}</el-form-item>
      <el-form-item label="项目用途">{{ userOrderInfoResponses?.ytdes }}</el-form-item>
      <el-form-item label="是否可联系">{{ userOrderInfoResponses?.cancall == 1 ? '不方便联系' : '方便联系' }}</el-form-item>
    </Drawer>

  </div>
</template>

<script setup lang="ts">
import pageSearch from "@/components/base-ui/page-search";
import pageTable from "@/components/base-ui/page-table";
import Dialog from "@/components/base-ui/dialog";
import { getPicImg } from '@/api/upload'
import { ref, reactive } from 'vue'
import { searchFormConfig } from "./config/search.config";
import { tableInit } from "./config/table.config";
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { getOrderList, changeordertype, exportOrder } from '@/api/order'
import type { FormInstance, FormRules } from 'element-plus'
import LTUpload from '@/components/base-ui/upload'
import { message } from "@/utils/message";
import uploadFiles from '@/components/base-ui/uploadFiles'
import Drawer from "@/components/base-ui/drawer";

const {
  exportExcel,
  tableData,
  getData,
  params,
  loading,
  sizeChange,
  currentChange,
  searchSubmit,
  DialogRef,
  openDialog,
  filterOrder,
  filterColor,
  moneyFormat,
  serachVal,
  pageSize,
  currentPage,
  DrawerRef,

} = usepageTable({
  tableInit,
  xlsxName: '订单.xlsx',
  getRes: getOrderList,
  otherQuery: {
    ddlx: 1
  }
})

getData()


const ruleFormRef = ref<FormInstance>()


const ruleForm = reactive({
  type: '',
  ydh: '',
  urlList: [],

})

const rules = reactive<FormRules<typeof ruleForm>>({
  ydh: [{ required: true, message: '请填写订单号', trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(ruleForm, 'ruleForm')
      let Q = {
        "id": handleID.value,
        "type": ruleForm.type,
        "ydh": ruleForm.ydh,
        'fpimage': '',
        fpname: ""
      }
      if (ruleForm.urlList.length > 0) {
        Q.fpimage = ruleForm.urlList[0]?.response?.data?.result[0]?.uuid ?? ruleForm.urlList[0]?.imgId
        Q.fpname = ruleForm.urlList[0]?.name
      }
      changeordertype(Q).then(res => {
        message("修改成功", {
          type: "success"
        });
        DialogRef.value.close()
        getData()
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.type = '1'
  ruleForm.urlList = []
  ruleForm.ydh = ''

  handleID.value = null
}


const handleID = ref(null)

const openForm = (row) => {
  handleID.value = row.id
  ruleForm.type = String(row.orderstatu)
  if (row.ydh) {
    ruleForm.ydh = row.ydh
  }
  if (row.fpimage) {
    ruleForm.urlList = [{
      name: row.fpname,
      url: getPicImg(row.fpimage),
      imgId: row.fpimage
    }]
  }
  openDialog()
}

const exportOrderFn = () => {
  let reqParams = {
    size: pageSize.value,
    index: currentPage.value,
    ...serachVal.value,
  };
  exportOrder(reqParams).then(data => {
    let url = window.URL.createObjectURL(new Blob([data]))
    let link = document.createElement("a")
    link.style.display = "none"
    link.href = url
    let filename = (new Date()).getTime() + ".xlsx"
    link.setAttribute("download", filename)
    document.body.appendChild(link)
    link.click()
  }).finally(() => {

  })
}


const userOrderInfoResponses = ref('')

const openDrawerFn = (row) => {
  userOrderInfoResponses.value = row.userOrderInfoResponses[0]
  console.log(userOrderInfoResponses.value, 'userOrderInfoResponses.value ')
  DrawerRef.value.open();
}

const DrawerRefClose = () => {
  DrawerRef.value.close();
}
</script>

<style scoped></style>
